<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>基本选择器</title>
</head>
<style>
  /* 通配选择器：初始化页面元素的样式 */
  /* * {
    margin: 0;
    padding: 0;
    list-style: none;
  } */
  
  /* 逗号选择器：同时选中多个元素 */
  body,ul,li,h1 {
    margin: 0;
    list-style: none;
    padding: 0;
  }

  /* 标签选择器：选中文件中该标签所对应的所有元素 */
  div {
    font-size: 30px;
  }

  /* 类名选择器：选中文件中所有具有该类名的元素，类名的值可以在同一文件中重复 */
  .center {
    /* 水平自适应居中 */
    margin: 0 auto;
    width: 500px;
    background-color: red;
  }

  /* id选择器：唯一值，规范 */
  #one {
    background-color: teal;
  }

  /* 组合选择器：先选中第一个选择器选中的元素，再选中第二个选择器选中的元素 */
  div.one {
    color: yellow;
  }

</style>
<body>
  <div class="three">1</div>
  <div class="two one">2</div>
  <p class="one">段落</p>


  <div class="header">
    <div class="center">头部</div>
  </div>

  <div id="one">id选择器</div>

  
  <div class="footer">
    <div class="center">底部</div>
  </div>

  <ul>
    <li>1</li>
    <li>2</li>
  </ul>
  <h1>标题一</h1>
</body>
</html>